<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :maskClosable="false"
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    @close="close"
    :destroyOnClose="true"
    cancelText="关闭"
    okText="保存"
  >
    <div style="margin: 0 auto">
      <a-form-model ref="form" :rules="validatorRules" :model="queryParam">
        <a-row :gutter="24">
          <a-col :md="24" :sm="24">
            <a-form-model-item
              label="数据源名称"
              :labelCol="labelColRow"
              :wrapperCol="wrapperColRow"
              prop="dataSourceName"
            >
              <a-input
                :placeholder="queryParam.id ? '' : '请输入数据源名称'"
                v-model="queryParam.dataSourceName"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-model-item
              label="数据源编码"
              :labelCol="labelColRow"
              :wrapperCol="wrapperColRow"
              prop="dataSourceCode"
            >
              <a-input
                :placeholder="queryParam.id ? '' : '请输入数据源编码'"
                v-model="queryParam.dataSourceCode"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-model-item label="数据源类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dataSourceType">
              <a-select :placeholder="queryParam.id ? '' : '请选择数据源类型'" v-model="queryParam.dataSourceType">
                <a-select-option v-for="(item, index) in typeList" :key="index" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-model-item label="连接名" :labelCol="{ sm: 4 }" :wrapperCol="wrapperCol" prop="dataSourceLink">
              <a-input :placeholder="queryParam.id ? '' : '请输入连接名'" v-model="queryParam.dataSourceLink"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-model-item label="主机 IP" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dataSourceIp">
              <a-input :placeholder="queryParam.id ? '' : '请输入主机IP'" v-model="queryParam.dataSourceIp"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-model-item label="端口号" :labelCol="{ sm: 4 }" :wrapperCol="wrapperCol" prop="dataSourcePort">
              <a-input :placeholder="queryParam.id ? '' : '请输入端口号'" v-model="queryParam.dataSourcePort"></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-model-item label="用户名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dataSourceUsername">
              <a-input
                :placeholder="queryParam.id ? '' : '请输入用户名'"
                v-model="queryParam.dataSourceUsername"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-model-item label="密码" :labelCol="{ sm: 4 }" :wrapperCol="wrapperCol" prop="dataSourcePassword">
              <a-input
                :placeholder="queryParam.id ? '' : '请输入密码'"
                v-model="queryParam.dataSourcePassword"
              ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-button type="link" style="margin-left: 7%" @click="test()">连接测试</a-button>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
  </j-modal>
</template>
<script>
import { httpAction, getAction, postAction } from '@/api/manage'

export default {
  name: 'SysPositionModal',
  components: {},
  data() {
    return {
      disableSubmit: false,
      title: '',
      visible: false,
      isCheck: false,
      queryParam: {},
      url: {
        test: '/dataSourceManage/testDataSourceById', // 连接测试
        add: '/dataSourceManage/save',
      },
      dataSource: [],
      typeList: [
        {
          value: 0,
          label: 'MySql',
        },
      ],
      validatorRules: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 10 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
      labelColRow: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperColRow: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    }
  },
  created() {},
  methods: {
    // 连接测试
    test() {
      let data = JSON.parse(JSON.stringify(this.queryParam))
      postAction(this.url.test, data).then((res) => {
        if (res.success) {
          this.$message.success('连接成功！')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    close(isSubmit) {
      if (isSubmit) {
        this.saveData()
      } else {
        this.visible = false
      }
    },
    saveData() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          postAction(this.url.add, this.queryParam)
            .then((res) => {
              if (res.success) {
                this.$message.success(res.message)
                this.$emit('ok')
                this.visible = false
              } else {
                this.$message.error(res.message)
              }
            })
            .finally(() => {})
        } else {
          return false
        }
      })
    },

    // TODO ------
    add() {
      this.dataSource = []
      this.queryParam = {}
      this.visible = true
    },
    check(record) {
      this.model = Object.assign({}, record)
      this.visible = true
      this.httpRequest()
      this.queryParam = {
        unit: '',
      }
    },
    edit(record) {
      this.queryParam = Object.assign({}, record)
      this.visible = true
      // this.httpRequest()
      // this.queryParam = {}
    },
  },
}
</script>

<style lang='less' scoped>
</style>
